<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="规则" :label-width="formLabelWidth" prop="settId">
        <fortress-select
            v-model="form.settId"
            :dictList="settIdList"
            placeholder="请选择规则"
            clearable
        ></fortress-select>
      </el-form-item>
      <el-form-item label="工作日" :label-width="formLabelWidth" prop="workDayCheckedList">
        <el-checkbox-group v-model="form.workDayCheckedList">
          <el-checkbox
              v-for="item in WorkDay_oaList"
              :label="item.code"
              :key="item.code"
          >{{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="考勤时间" :label-width="formLabelWidth" prop="time">
        <el-time-picker
            is-range
            value-format="HH:mm"
            format="HH:mm"
            v-model="form.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-time-picker>
      </el-form-item>
      <el-form-item v-show="form.isRest==1" label="休息时间" :label-width="formLabelWidth" prop="restStart">
        <el-time-picker
            is-range
            value-format="HH:mm"
            format="HH:mm"
            v-model="form.rest"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="上班打卡时间" :label-width="formLabelWidth" prop="amTime">
        <el-time-picker
            is-range
            value-format="HH:mm"
            format="HH:mm"
            v-model="form.amTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="下班打卡时间" :label-width="formLabelWidth" prop="pmTime">
        <el-time-picker
            value-format="HH:mm"
            format="HH:mm"
            is-range
            v-model="form.pmTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="迟到时间" :label-width="formLabelWidth" prop="lateTime">
        <el-input-number
            v-model="form.lateTime"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="早退时间" :label-width="formLabelWidth" prop="leaveTime">
        <el-input-number
            v-model="form.leaveTime"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否开启休息时间" :label-width="formLabelWidth" prop="isRest">
        <el-switch
            v-model="form.isRest"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
        <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  attendancesettingdateInfo,
  attendancesettingdateSave,
  attendancesettingdateEdit
} from "@/api/oa/attendancesettingdate.js";
import {enumList, urlList,} from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";

export default {
  data() {
    let fullYear = new Date().getFullYear();
    return {
      visible: false,
      form: {
        settId: "",
        amTime: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        pmTime: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        time: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        rest: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        workDayCheckedList: [],
        startTime: "",
        endTime: "",
        amStartTime: "",
        amEndTime: "",
        pmStartTime: "",
        pmEndTime: "",
        lateTime: "",
        leaveTime: "",
        isRest: "2",
        restEnd: "",
        status: "2",
        restStart: "",
      },
      formLabelWidth: "150px",
      rules: {
        settId: [
          {required: true, message: "请输入规则", trigger: "blur"},
        ],
        workDayCheckedList: [
          {required: true, message: "请输入工作日", trigger: "blur"},
        ],
        startTime: [
          {required: true, message: "请输入考勤开始时间", trigger: "blur"},
        ],
        endTime: [
          {required: true, message: "请输入考勤结束时间", trigger: "blur"},
        ],
        amStartTime: [
          {required: true, message: "请输入上班打卡开始时间", trigger: "blur"},
        ],
        amEndTime: [
          {required: true, message: "请输入上班打卡结束时间", trigger: "blur"},
        ],
        pmStartTime: [
          {required: true, message: "请输入下班打卡开始时间", trigger: "blur"},
        ],
        pmEndTime: [
          {required: true, message: "请输入下班打卡结束时间", trigger: "blur"},
        ],
        lateTime: [
          {required: true, message: "请输入迟到时间", trigger: "blur"},
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        leaveTime: [
          {required: true, message: "请输入早退时间", trigger: "blur"},
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        isRest: [
          {required: true, message: "请输入是否开启休息时间", trigger: "blur"},
        ],
      },
      WorkDay_oaList: [],
      YesNoList: [],
      settIdList: [],
    };
  },
  created() {
  },
  methods: {
    queryEnumList() {
      this.WorkDay_oaList = [];
      enumList("WorkDay", "oa").then((resp) => {
        if (resp.code == 0) {
          this.WorkDay_oaList = resp.data;
        }
      });
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
    },
    queryUrlList() {
      this.settIdList = [];
      urlList("/oa/attendanceSetting/list").then((resp) => {
        if (resp.code == 0) {
          if (resp.data) {
            resp.data.forEach((item) => {
              this.settIdList.push({code: item.id, name: item.name});
            });
          }
        }
      });
    },
    init(id) {
      this.resetForm();
      this.queryEnumList();
      this.queryUrlList();
      //修改
      if (id) {
        attendancesettingdateInfo(id).then((resp) => {
          if (resp.code == 0) {
            this.$nextTick(() => {
              let fullYear = new Date().getFullYear();
              resp.data.amTime = [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)];
              resp.data.pmTime = [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)];
              resp.data.time = [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)];
              resp.data.rest = [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)];

              if (resp.data.startTime != null && resp.data.startTime != '') {
                resp.data.time[0] = resp.data.startTime;
              }
              if (resp.data.endTime != null && resp.data.endTime != '') {
                resp.data.time[1] = resp.data.endTime;
              }
              if (resp.data.amStartTime != null && resp.data.amStartTime != '') {
                resp.data.amTime[0] = resp.data.amStartTime;
              }
              if (resp.data.amEndTime != null && resp.data.amEndTime != '') {
                resp.data.amTime[1] = resp.data.amEndTime;
              }

              if (resp.data.pmStartTime != null && resp.data.pmStartTime != '') {
                resp.data.pmTime[0] = resp.data.pmStartTime;
              }
              if (resp.data.pmEndTime != null && resp.data.pmEndTime != '') {
                resp.data.pmTime[1] = resp.data.pmEndTime;
              }

              if (resp.data.restStart != null && resp.data.restStart != '') {
                resp.data.rest[0] = resp.data.restStart;
              }
              if (resp.data.restEnd != null && resp.data.restEnd != '') {
                resp.data.rest[1] = resp.data.restEnd;
              }
              this.form = {
                ...this.form,
                ...resp.data,
              };
              if (resp.data.workDay) {
                this.form.workDayCheckedList = resp.data.workDay.split(';');
              }
            });
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workDayCheckedList) {
            this.form.workDay = this.form.workDayCheckedList.join(";");
          }

          const startTime = this.form.time[0];
          const endTime = this.form.time[1];
          const amStartTime = this.form.amTime[0];
          const amEndTime = this.form.amTime[1];
          const pmStartTime = this.form.pmTime[0];
          const pmEndTime = this.form.pmTime[1];

          const restStart = this.form.rest[0];
          const restEnd = this.form.rest[1];


          //修改
          if (this.form.id) {
            attendancesettingdateEdit({
              ...this.form,
              startTime,
              endTime,
              amStartTime,
              amEndTime,
              pmStartTime,
              pmEndTime,
              restStart,
              restEnd
            }).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
            //新增
          } else {
            attendancesettingdateSave({
              ...this.form,
              startTime,
              endTime,
              amStartTime,
              amEndTime,
              pmStartTime,
              pmEndTime,
              restStart,
              restEnd
            }).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      let fullYear = new Date().getFullYear();
      this.form = {
        settId: "",
        workDayCheckedList: [],
        startTime: "",
        endTime: "",
        amStartTime: "",
        amEndTime: "",
        pmStartTime: "",
        pmEndTime: "",
        lateTime: "",
        leaveTime: "",
        isRest: "2",
        restEnd: "",
        status: "2",
        restStart: "",
        amTime: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        pmTime: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        time: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
        rest: [new Date(fullYear, 1, 1, 0, 0), new Date(fullYear, 1, 1, 23, 0)],
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
